<template>
    <div class = "rightCharts" 
        :class="{'heightbg': $route.path=='/'}"
        v-if="$store.state.forq==0">
        <div id="wenchaCharts">
            <div class="panel">
                <div class="bestCityTitle">
                    <!--宽窄竖线-->
                    <div class="doubleLine lf">
                        <div class="wide lf"></div>
                        <div class="narrow lf"></div>
                    </div>
                    <!--最优城市-->
                    <div class="bestCityP lf">
                        <div class="bestCityName lf">昨日站点数据准确率</div>
                    </div>
                </div>
                <div class="threeLine">
                    <div class="firstLine lf"></div>
                    <div class="secondLine lf"></div>
                    <div class="thirdLine lf"></div>
                </div>
                <div class="tableHeader">
                    <div>序号</div>
                    <div>站点</div>
                    <div>准确率</div> 
                </div>
                <div class="activity" id="J_Activity" 
                    :class="{'height1': $route.path=='/','height2':$route.path.indexOf('station')>0}"
                    v-if="youxiaoList" >
                    <ul>
                        <li v-for="(item,index) of youxiaoList"  :key="index"
                        :class="{  'font1': item.value >= 50 && item.value <= 80,
                                    'font2': item.value >= 0 && item.value < 50,
                                                    }" 
                        >
                            <div>{{item.StationId}}</div>
                            <div>{{item.name}}</div>
                            <div>{{item.value}}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="wenduCharts" v-if=" $route.path == '/'">
            <div class="panel">
                <div class="bestCityTitle">
                    <!--宽窄竖线-->
                    <div class="doubleLine lf">
                        <div class="wide lf"></div>
                        <div class="narrow lf"></div>
                    </div>
                    <!--最优城市-->
                    <div class="bestCityP lf">
                        <div class="bestCityName lf">负氧离子小时浓度排行（单位：个/cm3）</div>
                    </div>
                </div>
                <div class="threeLine">
                    <div class="firstLine lf"></div>
                    <div class="secondLine lf"></div>
                    <div class="thirdLine lf"></div>
                </div>
            </div>
            <div id="levelTen" ref="chart" style="width:21.35vw;height:32vh"></div>
            <div class="topName">
                <div style="text-align:left" v-for="(item , index) of topList1" :key="index">
                    {{index+1}}<span style="float:left;">{{item}} ·</span>
                </div>
            </div>
        </div>
        <left-contentCity  v-if="$route.path.indexOf('city')>0"></left-contentCity>  
        <left-contentCounty v-if="$route.path.indexOf('county')>0"></left-contentCounty>  
    </div> 
</template>
<script>
    import axios from 'axios'
    import LeftContentCity from './rightCharts/LeftContentCity'
    import LeftContentCounty from './rightCharts/LeftContentCounty'
    let echarts = require('echarts');
    export default {
        name: 'RightCharts',
        components:{
            LeftContentCity,
            LeftContentCounty
        },
        data(){
            return{
                youxiaoList: [],
                topList1:[],
                topList: ['1','2','3','4','5','6','7','8','9','10'],
                
            }
        },
        computed:{
            FYLZCounts(){
                //保存对象时，先专成字符串，再专成json对象
                return JSON.parse(this.$store.state.FYLZCounts)
            },
            TOP10FYLZCounts(){
                return this.$store.state.TOP10FYLZCounts
            }
        },
        watch:{
            FYLZCounts(val){
                this.$nextTick(function () {
                    this.getProvinceData()
                });
            },
            TOP10FYLZCounts(val){
                this.$nextTick(function () {
                    this.getProvinceData()
                });
            }
        },
        methods:{
            getProvinceData(){
                var s = [];
                for(var i=0;i<this.FYLZCounts.length;i++){
                    s[i]={}
                    s[i].value=parseInt(this.FYLZCounts[i].Percent);
                    s[i].name=this.FYLZCounts[i].StationName;
                    s[i].StationId=this.FYLZCounts[i].StationId;
                }
                this.youxiaoList = s;
                s.sort(function(a,b){
                    if(a.value<b.value){
                        return -1;
                    }
                    if(a.value>b.value){
                        return 1;
                    }
                        return 0;
                })
                var ss = s.slice(s.length-10);
                var stationS = [];
                var stationV = [];
                for(var j = 0;j<ss.length;j++){
                    stationS.push(ss[j].name);
                    stationV.pop(ss[j].value);
                }
                if(this.$route.path=='/'){
                    let bar_dv = this.$refs.chart;
                let myLevel = echarts.init(bar_dv);
                
                var stationS1=[];
                var stationV1=[];
                for(var i=0;i<this.TOP10FYLZCounts.length;i++){
                    stationV1.unshift(this.TOP10FYLZCounts[i].Count)
                    stationS1.push(this.TOP10FYLZCounts[i].StationName);
                    // stationS1.pop(this.TOP10FYLZCounts[i].StationName);
                    this.topList1[i]= this.TOP10FYLZCounts[i].Country;
                    
                }
                var array1 = stationS1;
                var array2 = array1.reverse();
                let option = {
                    tooltip: {
                        show:false,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    grid: {
                        top: '2%',
                        bottom: '1%',
                        left:'20%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: false,
                                interval: 1,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            }

                        }
                    ],
                    yAxis:{
                        type: 'category',
                        data: ['0','1','2','3','4','5','6','7','8','9'],
                        axisLabel: {
                            color:"rgba(255,255,255,1)",
                            formatter: function (value) {
                                return '{' + value + '| }{value|'+array2[value]+'}';
                            },
                            rich: {
                                value: {
                                    align: 'center',
                                    padding:[0,0,0,-5],
                                    fontSize:14
                                }
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        zlevel: 99
                        },
                    series: [{
                        type: 'bar',
                        barWidth: '25%',
                        barCategoryGap: '20%',
                        itemStyle: {
                            normal: {
                                barBorderRadius:[10, 10, 10, 10],
                                color: new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [
                                            {offset: 0, color: '#048BFE'},
                                            {offset: 1, color: '#00EEF1'}
                                        ]
                                ),
                                label: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '12'
                                    }
                                }
                            }
                        },
                        data: stationV1
                    }]
                }
                //option.series[0].data.reverse();
                myLevel.setOption(option);
                window.addEventListener("resize", function () {
                    myLevel.resize();
                });     
                }
                
            }
        },
        mounted(){
            this.$nextTick(function () {
                this.getProvinceData()
            });
            this.$nextTick(function(){
                $(function () {
                    var listPanel = $('#J_Activity ul');
                    var z = 0;//向上滚动top值
                    function up() {//向上滚动
                        listPanel.animate({//站点向上滑动一个
                            'top': (z - 30) + 'px'
                        }, 1500, 'linear', function () {
                            listPanel.css({'top': '0px'})
                            .find("li:first").appendTo(listPanel);
                            up();
                        });
                    }
                    up();
                    listPanel.mouseover(function(){
                        listPanel.stop();
                    })
                    listPanel.mouseout(function(){
                        up();
                    })
                });
            })
            
        }
    }
</script>
<style lang="stylus" scoped>
    .activity >>> .font1
        background:#FD9800
    .activity >>> .font2
        background:red
    .rightCharts.heightbg
        height:88vh
    .rightCharts >>> .height1
        height:45vh!important
    .rightCharts >>> .height2
        height:61vh!important
    .rightCharts
        width: 4.25rem
        height: 68vh
        position: absolute
        z-index:3
        top: 0
        right: .45rem      
        background :rgba(0,0,0,0.6)
        #wenchaCharts
            width: 4.25rem
            height: 31vh  
            margin-bottom: 20px        
            .panel
                margin:0 auto
                text-align: center
                .bestCityTitle
                    width: 100%
                    height: 3vh
                    padding:5px
                    color:white
                    .doubleLine
                        width: .11rem
                        height: 1.9vh
                        .wide
                            width: .07rem
                            height: 1.9vh
                            background : #41E6FD
                        .narrow
                            width: .02rem
                            height: 1.9vh
                            background : #41E6FD
                            margin-left: .02rem
                    .bestCityName
                        font-size: .18rem
                        font-family: FZZXHJW--GB1-0
                        margin-left: .12rem
                        color:#fff
                .threeLine
                    width: 100%
                    height: .03rem
                    .firstLine
                        width: 3.4rem
                        height: .03rem
                        background : #41E6FD
                    .secondLine
                        width: .08rem
                        height: .03rem
                        background: rgba(255,255,255,.54)
                        margin-left: .06rem
                        margin-right: .04rem
                    .thirdLine
                        width: .64rem
                        height: .03rem
                        background: rgba(255,255,255,1)
                .tableHeader
                    background: rgba(68,109,126,1)
                    line-height: 24px
                    display:flex
                    color: #fff
                    justify-content : space-around
                .activity
                    height: 26.9vh
                    position: relative
                    overflow: hidden
                    ul
                        top: -15px
                        padding: 0
                        color: #666
                        position: relative
                        li
                            display:flex
                            padding:0
                            font-size: 12px
                            line-height: 30px
                            list-style: none
                            border-bottom: 1px solid #59E1FE
                            div 
                                width:33%
                                text-align :left
                                color:#fff
                            div:first-child
                                text-align:center
                            div:last-child
                                text-align:center
                        li:hover
                            font-size:15px;
        #wenduCharts
            width:4.25rem
            position:relative
            top:19vh
            font-family:FZZXHJW--GB1-0;
            .panel
                margin:0 auto
                text-align: center
                .bestCityTitle
                    width: 100%
                    height: 3vh
                    padding: 5px
                    color:white
                    .doubleLine
                        width: .11rem
                        height: 1.9vh
                        .wide
                            width: .07rem
                            height: 1.9vh
                            background : #41E6FD
                        .narrow
                            width: .02rem
                            height: 1.9vh
                            background : #41E6FD
                            margin-left: .02rem
                    .bestCityName
                        font-size: .18rem
                        font-family: FZZXHJW--GB1-0
                        margin-left: .12rem
                        color:#fff
                .threeLine
                    width: 100%
                    height: .03rem
                    .firstLine
                        width: 3.4rem
                        height: .03rem
                        background : #41E6FD
                    .secondLine
                        width: .08rem
                        height: .03rem
                        background: rgba(255,255,255,.54)
                        margin-left: .06rem
                        margin-right: .04rem
                    .thirdLine
                        width: .64rem
                        height: .03rem
                        background: rgba(255,255,255,1)
            .topName
                width:80px
                height:31vh
                display:flex
                flex-direction : column
                justify-content : space-around
                align-items : center
                position:absolute
                top:3.7vh
                left:0
                color:white
                div 
                    width:80px
                    flex:1
                    display:flex
                    text-indent: 3px
                    align-items : center
                    span
                        display:inline-block
                        width: 60px
                        text-align: right
                div:first-child
                    font-size: .16rem
   
</style>




    
    